<script lang="ts">
import dayjs from 'dayjs';
import { setCommissionPopup } from '~comp-b/referral/commission/SetCommission.vue';
// import { valueOfRangePickerProps } from '~comp/antd-assist';
import { RangeMonth } from '~/components-business/range';
import ReferralItem from './components/ReferralItem.vue';
import ReferralTable from './components/ReferralTable.vue';

const [setEle, eleBp] = useElementBreakpoint({});
// const rangePresets = ref([
//   { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
//   { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
//   { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
//   { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },
// ]);
function useTableList() {
  const [listQry, listParams] = useFilterPaginationQuery(apis.apiInviteUsers, {
    start_time: {
      value: dayjs().startOf('month').utc(true).valueOf(),
      responsive: true,
    },
    end_time: {
      value: dayjs().endOf('month').utc(true).valueOf(),
      responsive: false,
    },
    channel_id: {
      value: '',
      responsive: true,
    },
  });
  const listData = computed(() => listQry?.data?.value?.list ?? []);
  const total = computed(() => listQry?.data?.value?.pagination.total ?? 0);

  return {
    listQry,
    listParams,
    listData,
    total,
  };
}
</script>

<script setup lang="ts">
const { channelListForAntdSelectOptions } = queries.useInviteChannelQuery();
const { listQry, listParams, listData, total } = useTableList();
</script>

<template>
  <div>
    <TCard :ref="setEle">
      <template #header>
        <div class="w-full gap-2" :class="{ 'text-left': eleBp.lt5xl, 'flex items-center justify-between w-full': eleBp['5xl'] }">
          <div class="flex items-center gap-2">
            <span class="text-xl">{{ $t('72cBmkhZUlgYYrqv9UGx') }}</span>
            <span class="inline-block rounded bg-green/20 px-3 py-1 text-xs text-green">{{ total }}</span>
          </div>

          <div class="grid grid-cols-2 mt-3 gap-2 !self-stretch">
            <ASelect
              v-model:value="listParams.channel_id"
              :options="channelListForAntdSelectOptions"
              class="antd-cover__Select-3d-gray" :class="{ 'w-40': eleBp['5xl'] }"
              :bordered="false" size="small" :virtual="false"
            />
            <!-- <ARangePicker
              v-bind="valueOfRangePickerProps(listParams)"
              class="ant-cover__RangePicker-3d-gray" :class="{ 'w-40': eleBp['5xl'] }"
              inputReadOnly :bordered="false" format="MM-DD"
            /> -->
            <RangeMonth
              v-model:startTime="listParams.start_time"
              v-model:endTime="listParams.end_time"
              :bordered="false"
              size="small"
              :virtual="false"
              :class="{ 'w-40': eleBp['5xl'] }"
            />
          </div>
        </div>
      </template>

      <TSuspenseView v-bind="buildSvPropsOfQuery(listQry, { isEmptyFn: () => !listData?.length })" errorClass="min-h-40">
        <!-- 移动端 -->
        <div v-if="eleBp.lt5xl">
          <ReferralItem
            v-for="item of listData"
            :key="item.uid"
            :info="item"
            @setCommission="setCommissionPopup.open({ userId: $event })"
          />
        </div>
        <div v-if="eleBp['5xl']">
          <ReferralTable
            :info="listData"
            @setCommission="setCommissionPopup.open({ userId: $event })"
          />
        </div>
        <template #pending>
          <div v-if="eleBp.lt5xl">
            <TSkeleton v-for="i in 3" :key="i" class="grid grid-cols-2 w-full gap-2">
              <TSkeleton type="rect" width="120px" class="col-span-full" />
              <TSkeleton
                v-for="k in 8"
                :key="k"
                type="rect"
                height="15px"
              />
              <ADivider class="col-span-full" />
            </TSkeleton>
          </div>
          <TTableLoading v-if="eleBp['5xl']" />
        </template>
      </TSuspenseView>

      <setCommissionPopup.PresetComponent />
    </TCard>

    <TPagination
      v-model:page="listParams.page" v-model:pageSize="listParams.page_size" :querier="listQry"
      class="mt-2"
    />
  </div>
</template>
